<template>
    <el-dialog title="打印" :visible.sync="isOpen" width="70%" :before-close="closeDelDialog" append-to-body>

        <el-button type="primary" plain icon="el-icon-printer" @click="handleJieshouTap()" style="margin-left:10%;">打印</el-button>

        <div class="app-container">
            
            <table class="custom-table">
                <tr style="border: none;">
                    <th colspan="4" style="border: none;">
                        <div class="title">归 档 案、 资 料 登 记 表</div>
                    </th>
                </tr>
                <tr style="border: none;">
                    <th colspan="4" style="border: none;">
                        <div class="table_Info">
                            <p>归卷单位：保管处</p>
                            <p><span></span><span>年</span><span></span><span>月</span><span></span><span>日</span>
                                第<span></span>号</p>
                        </div>
                    </th>
                </tr>
                <tr>
                    <th>全宗</th>
                    <th>目录号</th>
                    <th>保管期限</th>
                    <th style="width:50%">案&emsp;&emsp;卷&emsp;&emsp;资&emsp;&emsp;料&emsp;&emsp;号</th>
                </tr>
                <tr>
                    <td>Bill Gates</td>
                    <td>555 77 854</td>
                    <td>555 77 855</td>
                    <td>国家档案局办公室关于开展第五批 ?中国档案文献遗产名录? 申报工作的通知国家档案局办公室关于开展第五批 ?中国档案文献遗产名录? 申报工作的通知</td>
                </tr>
                <tr v-for="item in 10" :key="item">
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>


                <tr>
                    <td colspan="3">合 计</td>
                    <td colspan="1">555 77 854</td>

                </tr>

                <tr>
                    <td colspan="1">备注</td>
                    <td colspan="3">555 77 854</td>

                </tr>
                <tr style="border: none;">
                    <td colspan="4" style="border: none;">
                        <div
                            style="text-align: left;padding: 5px 5px 0px 5px;align-items: center;justify-content: flex-start; opacity: 1;color: #000000;letter-spacing: 0px;font-family: 仿宋;font-size: 15px;">
                            注：如登记有误，请及时告知</div>
                    </td>
                </tr>
                <tr style="border: none;">
                    <th colspan="4" style="border: none;">
                        <div style="text-align: left;">调卷人：</div>
                    </th>
                </tr>
                <tr style="border: none;">
                    <th colspan="4" style="border: none;">
                        <div class="footer_info">
                            <p>归卷人：</p>
                            <p><span></span><span>年</span><span></span><span>月</span><span></span><span>日</span> 接收人：
                                <span></span>
                            </p>
                            <p><span></span><span>年</span><span></span><span>月</span><span></span><span>日</span></p>
                        </div>
                    </th>
                </tr>
            </table>
        </div>
    </el-dialog>
</template>
<script>
export default {
    props: ['isOpen'],
    data() {
        return {

        }
    },
    created() {

    },
    methods: {
        closeDelDialog() {
            this.$emit('closeDelDialog')
        }
    }
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog {
    overflow: hidden;
}

.app-container {
    width: 60%;
    margin: 30px auto;
    box-shadow: 0px 5px 10px #eee;
    padding: 30px 60px 60px;
}

.table {
    margin-top: 5px;
    padding: 1%;
}

.custom-table {
    width: 100%;
    /* 设置表格宽度为100% */
    margin: 0 auto;
    border-collapse: collapse;
    /* 合并单元格边框 */
}

.custom-table th {
    padding: 12px;
    /* 设置单元格内边距 */
    align-items: center;
    justify-content: center;
    opacity: 1;
    color: #000000;
    letter-spacing: 0px;
    font-weight: bold;
    font-family: 仿宋;
    font-size: 18px;
    border: 1px solid #000;
}

.custom-table td {
    padding: 5px;
    /* 设置单元格内边距 */
    align-items: center;
    justify-content: flex-start;
    opacity: 1;
    color: #000000;
    letter-spacing: 2px;
    font-family: 仿宋;
    font-size: 16px;
    border: 1px solid #000;
    /* 设置单元格边框样式 */
    text-align: center;
    /* 设置单元格文本居中 */
    height: 40px;
}

.custom-table .title {
    opacity: 1;
    color: #000000;
    letter-spacing: 0px;
    font-weight: bold;
    text-decoration: underline;
    font-family: 宋体;
    font-size: 30px;
}

.table_Info {
    display: flex;
    justify-content: space-between;
    opacity: 1;
    color: #000000;
    letter-spacing: 0px;
    font-weight: bold;
    font-family: 宋体;
    font-size: 16px;
}

.table_Info span {
    display: inline-block;
    margin-left: 20px;
}

.footer_info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.footer_info p span {
    display: inline-block;
    margin-left: 20px;
}</style>